<template>
	<view>
		<view class="banner gray" :style="{height:height}">
			<swiper class="swiper" :indicator-dots="indicatorDots" circular="true" indicator-active-color="#FFF" :autoplay="autoplay"  :interval="interval" :duration="duration" v-if="bannerData.length">
				<swiper-item v-for="(item,index) in bannerData" :key="item.id">
					<image :style="{height:height}" :src="item.image || item.url" @click="previewImage(index)" class="image"></image>
				</swiper-item>
			</swiper>
			
			<swiper class="swiper" :indicator-dots="indicatorDots" circular="true" indicator-color="#fff" indicator-active-color="#E21E1D" :autoplay="autoplay"  :interval="interval" :duration="duration" v-else>
				<swiper-item v-for="item in 1" :key="item">
					<image  class="gray"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name:'Banner',
		props:{
			bannerData:{
				type:Array,
				required:true
			},
			height:{
				type:String,
				required:false,
				default:'750rpx'
			},
		},
		data(){
			return {
				autoplay:true,
				indicatorDots:true,
				interval:2000,
				duration:1000,
			}
		},
		methods:{
			//预览轮播图
			previewImage(index){
				// 获取当前页面的轮播图数据
				let image = this.bannerData.map(item => {
					return item.image || item.url;
				})
				//uniapp预览轮播图
				uni.previewImage({
					current:index, // 预览图片的下标
					urls:image     // 预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner{
		overflow: hidden;
		width: 100%;
		margin: 0 auto;
		/*border-radius: ;*/
		.swiper {
			height: 100%;
			.image{
				width: 100%;
				height: 100%;
				&.gray{
					background-color: #ccc;
				}
			}
		}
	}
</style>
